<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Thông tin nhóm</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{groupBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.vfs";' rendered="#{!groupBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <f:event type="preRenderView" listener="#{groupBean.preViewAction()}" />
        <h:form id="mainForm">
            <p:tabView dynamic="true">
                <p:tab id="groupTab" title="Thông tin nhóm">
                    <p:messages id="msgs"/>
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">
                            <p:button value="Tạo mới" outcome="new"/>
                            <p:commandButton value="Sửa" action="#{groupBean.preEditAction}" update="groupTab" rendered="#{groupBean.group != null}"/>
                            <p:commandButton value="Xóa" actionListener="#{groupBean.preDeleteAction}" update="deleteMsgs" 
                                             rendered="#{groupBean.group != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.vfs" />  
                                <p:menuitem value="Danh sách nhóm" url="list.vfs" />
                            </p:menuButton>  
                        </p:toolbarGroup>
                    </p:toolbar>
                        
                    <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                                 columns="2" cellpadding="5" width="100%" rendered="#{groupBean.group != null}">  
                        <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Tên" />  
                        <h:outputText value="#{groupBean.group.name}" id="name" />
                        
                        <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Mã" />  
                        <h:outputText value="#{groupBean.group.code}"/>
                            
                        <h:outputLabel for="description" style="display: inline; float: right; padding-right: 5px;" value="Mô tả" />  
                        <h:outputText value="#{groupBean.group.description}" id="description"/>
                        
                        <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Role" />
                        <h:panelGroup>
                            <ui:repeat value="#{groupBean.group.roles}" var="role">
                                <h:outputText value="[#{role.name}] "/>
                            </ui:repeat>
                        </h:panelGroup>
                    </h:panelGrid>
                        
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">
                            <p:button value="Tạo mới" outcome="new"/>
                            <p:commandButton value="Sửa" action="#{groupBean.preEditAction}" update="groupTab" rendered="#{groupBean.group != null}"/>
                            <p:commandButton value="Xóa" actionListener="#{groupBean.preDeleteAction}" update="deleteMsgs" 
                                             rendered="#{groupBean.group != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.vfs" />  
                                <p:menuitem value="Danh sách nhóm" url="list.vfs" />
                            </p:menuButton>  
                        </p:toolbarGroup>
                    </p:toolbar>
                        
                    <p:dialog header="Thông báo" widgetVar="deleteDialog" width="250" showEffect="explode" hideEffect="explode">  
                        <p:dataList id="deleteMsgs" value="#{facesContext.messageList}"  
                                    var="msg" itemType="disc">  
                            <h:outputText value="#{msg.summary}"/>
                        </p:dataList>
                    </p:dialog>
                        
                    <p:confirmDialog message="Bạn có muốn xóa nhóm này?" appendToBody="true"
                                     header="Thông báo" severity="alert" widgetVar="deleteConfirm">  
                        <p:commandButton value="Có" oncomplete="deleteConfirm.hide()" update="msgs"
                                         actionListener="#{groupBean.deleteAction()}" />  
                        <p:commandButton value="Không" onclick="deleteConfirm.hide()" type="button" />                     
                    </p:confirmDialog>
                        
                    <script type="text/javascript">
                        function handleDeleteRequest(xhr, status, args) {
                            if(args.validationFailed || args.invalid) {
                                deleteDialog.show();
                                jQuery('#dialog').effect("shake", { times:3 }, 100);  
                            } else {
                                deleteConfirm.show();
                            }
                        }  
                    </script>
                </p:tab>
                
                <p:tab id="userTab" title="Thông tin người dùng thuộc nhóm" rendered="#{groupBean.group != null}">
                    <p:messages id="userMsgs"/>
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                         <p:toolbarGroup align="left">
                            <p:commandButton value="Thêm người dùng" onclick="addUserDialog.show();" />
                            <p:commandButton value="Xóa người dùng" actionListener="#{groupBean.preRemoveAction()}" update="removeMsgs" oncomplete="handleRemoveRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                    </p:toolbar>
                        
                    <p:dataTable id="userList" var="user" value="#{groupBean.group.users}" paginator="true" rows="10"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                 rowsPerPageTemplate="10,20,30" rowKey="#{user.id}"
                                 selection="#{groupBean.selectedUsers}">
                        <f:facet name="header">Danh sách người dùng</f:facet>
                        <p:column selectionMode="multiple" />
                        <p:column headerText="Tên đăng nhập">
                            <h:outputText value="#{user.username}"/>  
                        </p:column>
                        <p:column headerText="Email">
                            <h:outputText value="#{user.email}"/>  
                        </p:column>
                        <p:column headerText="Tên đầy đủ">
                            <h:outputText value="#{user.fullName}"/>
                        </p:column>
                    </p:dataTable>
                        
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">
                            <p:commandButton value="Thêm người dùng" onclick="addUserDialog.show();" />
                            <p:commandButton value="Xóa người dùng" actionListener="#{groupBean.preRemoveAction()}" update="removeMsgs" oncomplete="handleRemoveRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                    </p:toolbar>
                        
                    <p:dialog header="Info" widgetVar="removeDialog" width="250" showEffect="explode" hideEffect="explode">  
                        <p:dataList id="removeMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                            <h:outputText value="#{msg.summary}"/>
                        </p:dataList>
                    </p:dialog>

                    <p:dialog header="Danh sách người dùng" widgetVar="addUserDialog" resizable="false">  
                        <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                            <p:toolbarGroup align="left">
                                <p:commandButton value="Lưu" update="userList" 
                                                 oncomplete="addUserDialog.hide();" actionListener="#{groupBean.addUserAction()}"/>  
                            </p:toolbarGroup>
                        </p:toolbar>
                        
                        <p:dataTable id="addUserList" var="user" value="#{groupBean.userList}" paginator="true" rows="10"
                                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                     rowsPerPageTemplate="10,20,30" rowKey="#{user.id}"
                                     selection="#{groupBean.selectedAddUsers}">
                            <f:facet name="header">Danh sách người dùng</f:facet>
                            <p:column selectionMode="multiple" />
                            <p:column headerText="Email">
                                <h:outputText value="#{user.email}"/>  
                            </p:column>
                            <p:column headerText="Tên đầy đủ">
                                <h:outputText value="#{user.fullName}"/>
                            </p:column>
                        </p:dataTable>
                        
                        <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                            <p:toolbarGroup align="left">
                                <p:commandButton value="Lưu" update="userList" 
                                                 oncomplete="addUserDialog.hide();" actionListener="#{groupBean.addUserAction()}"/>  
                            </p:toolbarGroup>
                        </p:toolbar>
                    </p:dialog>
                    
                    <p:confirmDialog message="Bạn có muốn xóa người dùng này khỏi nhóm" appendToBody="true"
                                     header="Thông báo" severity="alert" widgetVar="removeConfirm">  
                        <p:commandButton value="Có" oncomplete="removeConfirm.hide()" update="userList"
                                         actionListener="#{groupBean.removeUserAction()}" />  
                        <p:commandButton value="Không" onclick="removeConfirm.hide()" type="button" />                     
                    </p:confirmDialog>
                        
                    <script type="text/javascript">
                        function handleRemoveRequest(xhr, status, args) {
                            if(args.validationFailed || args.invalid) {
                                removeDialog.show();
                                jQuery('#dialog').effect("shake", { times:3 }, 100);  
                            } else {
                                removeConfirm.show();
                            }
                        }  
                    </script>
                </p:tab>
            </p:tabView>
        </h:form>
    </ui:define>
</ui:composition>